<template>
	<view class="view_box">
		<!-- 大背景框 -->
		<div class="out_box">
			<div class="registerLogin_box">
				<!-- 图标 -->
				<div class="logoImg">
					<img class="inceImg" src="@/assets/images/logo.png" alt="">
					<span class="title">登录</span>
				</div>
				
				<!-- 登录注册数据 -->
				<div class="section_box">
					<!-- 登录 -->
					<div class="login_box" v-if="isLogin">
						<!-- 登录切换方式 -->
						<TabMenuVue :menu-config="menuConfig" @menu-changed="menuChanged"></TabMenuVue>
						<div class="q-login-tip">
							关于穷游网将实行
							<a href="//bbs.qyer.com/thread-2779523-1.html">手机绑定实名制的说明</a>
						</div>
						<!-- 登录方式 -->
						<div class="login_info_box">
							<!-- 账号、手机号 -->
							<div class="form_control">
								<div class="input_group">
									<input data-type="account" class="input input_account" type="text" v-model="loginDate.account.value" @blur="checkDate($event,0)" placeholder="手机号/邮箱/用户名">
								</div>	
								<div class="input_type" v-if="!loginDate.account.checkSuccess">
									<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj"
										alt="">
									<span>{{loginDate.account.tipInfo}}</span>
								</div>
								<div class="input_type" v-else></div>
							</div>
							<!-- 密码 -->
							<div class="form_control password_box" v-if="tabMenuIndex == 0">
								<div class="input_group">
									<input data-type="password" class="input input_pass" type="password" v-model="loginDate.password.value" @blur="checkDate($event,0)" placeholder="密码">
								</div>	
								<div class="input_type" v-if="!loginDate.password.checkSuccess">
									<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj"
										alt="">
									<span>{{loginDate.password.tipInfo}}</span>
								</div>
								<div class="input_type" v-else></div>
							</div>
							<!-- 验证码 -->
							<div class="form_control meg_code_box" v-if="tabMenuIndex == 1">
								<div class="input_group">
									<input data-type="msgCode" class="input input_code" type="text" v-model="loginDate.msgCode.value" @blur="checkDate($event,0)" placeholder="输入短信中的验证码">
									<button class="btn_code"  onclick="getMsgCode(1)">发送验证码</button>
								</div>
								<div class="input_type"  v-if="!loginDate.msgCode.checkSuccess">
									<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj"
										alt="">
									<span>{{loginDate.msgCode.tipInfo}}</span>
								</div>
								<div class="input_type" v-else></div>
							</div>
							<!-- 最后登陆按钮 -->
							<div class="form_control">
								<button class="btn_reg" @click="toLogin()">登录</button>
							</div>
							<!-- 第三方登陆图标 -->
							<div class="q-login-auth">
								<a href=""><img class="icon" src="@/assets/images/淘宝.png"></a>
								<a href=""><img class="icon" src="@/assets/images/qq.png"></a>
								<a href=""><img class="icon" src="@/assets/images/微信.png"></a>
								<a href=""><img class="icon" src="@/assets/images/微博.png"></a>
							</div>
							<div class="sec_bottom">
								<span class="fl">
									没有穷游帐号？
									<span @click="isLogin = false">立即注册</span>
								</span>
								<span class="fr">
									<a href="//nav.qyer.com/member">境外手机号登录</a>
								</span>
							</div>
						</div>
					</div>
					
					<!-- 注册 -->
					<div class="register_box" v-if="!isLogin">
						<div class="login_info_box">
							<!-- 手机号 -->
							<div class="form_control">
								<div class="input_group">
									<div class="phone_num">86</div>
									<input data-type="phoneNum" class="input input_text" v-model="registerDate.phoneNum.value" @blur="checkDate($event,1)"
										type="text" placeholder="输入用于登录得手机号码">
								</div>
								<div class="input_type" v-if="!registerDate.phoneNum.checkSuccess">
									<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj"
										alt="">
									<span>{{registerDate.phoneNum.tipInfo}}</span>
								</div>
								<div class="input_type" v-else></div>
							</div>
							<!-- 验证码 -->
							<div class="form_control">
								<div class="input_group">
									<input data-type="msgCode" class="input input_code" type="text" v-model="registerDate.msgCode.value" @blur="checkDate($event,1)" placeholder="输入短信中的验证码">
									<button class="btn_code" onclick="getMsgCode(2)">发送验证码</button>
								</div>
								<div class="input_type" v-if="!registerDate.msgCode.checkSuccess">
									<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj"
										alt="">
									<span>{{registerDate.msgCode.tipInfo}}</span>
								</div>
								<div class="input_type" v-else></div>
							</div>
							<!-- 密码 -->
							<div class="form_control">
								<div class="input_group">
									<input data-type="password" class="input input_pass" type="password" v-model="registerDate.password.value" @blur="checkDate($event,1)" placeholder="输入8-16位密码，需包含字母及数字">
								</div>
								<div class="input_type" v-if="!registerDate.password.checkSuccess">
									<img class="err_icon" src="https://fes.qyerstatic.com/FrdXpfdkBK37-ZyIWf_UYJ7ZucLj"
										alt="">
									<span>{{registerDate.password.tipInfo}}</span>
								</div>
								<div class="input_type" v-else></div>
							</div>
							<div class="form_control">
								<button class="btn_reg" onclick="toRegister()">注册</button>
							</div>
							<div class="sec_bottom">
								<span class="fl">
									已有穷游帐号？
									<span @click="isLogin = true">登录</span>
								</span>
								<span class="fr">
									同意<a href="//nav.qyer.com/member">会员条款</a>和<a href="//nav.qyer.com/exemption">免责声明</a>
								</span>
							</div>
						</div>
					</div>
					
					<!-- 扫码图片 -->
					<div class="bg_box">
						
					</div>
				</div>
			</div>
			
		</div>
		
	</view>
</template>

<script>
	import TabMenuVue from "@/components/TabMenu.vue"
	import constants from "@/common/constants"
	
	export default{
		components:{TabMenuVue},
		data() {
			return{
				menuConfig:['账号登录','短信快捷登录'],
				tabMenuIndex:0,
				isLogin:true,
				loginDate:{
					account:{
						value:'',
						tipInfo:'',
						checkSuccess:true,
						tabMenuIndex:[0,1]
					},
					password:{
						value:'',
						tipInfo:'',
						checkSuccess:true,
						tabMenuIndex:[0]
					},
					msgCode:{
						value:'',
						tipInfo:'',
						checkSuccess:true,
						tabMenuIndex:[1]
					}
				},
				registerDate:{
					phoneNum:{
						value:'',
						tipInfo:'',
						checkSuccess:true
					},
					password:{
						value:'',
						tipInfo:'',
						checkSuccess:true
					},
					msgCode:{
						value:'',
						tipInfo:'',
						checkSuccess:true
					}
				},
				validataConfig:constants.VALIDATE_CONFIG
			}
		},
		methods:{
			menuChanged(index){
				this.tabMenuIndex = index;
			},
			// 正则验证方法
			checkDate(e,type){
				const key = e.target.getAttribute('data-type');
				// 获取对应的验证
				const validataInfo = this.validataConfig[key];
				let chackData = '';
				// 判断是登陆还是注册
				if(type == 0){
					chackData = this.loginDate[key];
				}else{
					chackData = this.registerDate[key];
				}
				if(validataInfo.regExp.test(chackData.value)){
					chackData.checkSuccess = true;
				}else{
					chackData.tipInfo = validataInfo.tipInfo;
					chackData.checkSuccess = false;
				}
			},
			checkDateAll(){
				console.log(this.loginDate);
				return true;
			},
			// 登陆验证方法
			toLogin(){
				if(this.checkDateAll()){
					console.log(111);
				}
			},
			
		}
	}
	
</script>

<style lang="scss">
	
	@import url('../../public/public.scss');
	
	/* 大背景 */
	.out_box {
		width: 100%;
		height: 100%;
		min-width: 1080px;
		background: url(https://fes.qyerstatic.com/fe_ssr_passport/ecb39528d488b6c520f7ddd3898379d6.jpg) no-repeat;
		background-size: 100% 100%;
	
		.registerLogin_box {
			padding-top: 60px;
			display: flex;
			flex-direction: column;
			align-items: center;
	
			/* 图标框 */
			.logoImg {
				width: 380px;
				height: 46px;
				text-align: center;
				font-size: 24px;
				color: white;
				text-shadow: 0 0 4px rgba(0, 0, 0, .3);
	
				.inceImg {
					height: 100%;
					vertical-align: bottom;
				}
			}
	
			/* 登录注册数据 */
			.section_box {
				display: flex;
				margin-top: 45px;
				
				.login_box,.register_box {
					width: 380px;
					background: hsla(0,0%,100%,.95);
					box-shadow: 0 0 10px rgba(0,0,0,.3);
					box-sizing: border-box;
					
					.login_info_box {
						width: 100%;
						.form_control {
							.input_group {
								height: 40px;
								display: flex;
								justify-content: space-between;
								
								.input {
									border: 1px solid #d7d7d7;
									box-sizing: border-box;
									padding: 3px 7px;
									font-size: 14px;
									outline: none;
								}
					
								.phone_num {
									width: 78px;
									border: 1px solid silver;
									line-height: 40px;
									font-size: 14px;
									box-sizing: border-box;
									padding: 0 24px 0 10px;
									background-color: white;
									position: relative;
									cursor: pointer;
								}
					
								.phone_num::after {
									position: absolute;
									right: 6px;
									top: 50%;
									margin-top: -5px;
									content: "";
									display: block;
									width: 12px;
									height: 12px;
									background: url() 50%/16px 16px no-repeat;
									-webkit-transition: -webkit-transform .2s ease;
									transition: -webkit-transform .2s ease;
									transition: transform .2s ease;
									transition: transform .2s ease, -webkit-transform .2s ease;
								}
					
								.input_text {
									width: 248px;
								}
					
								.btn_code {
									width: 125px;
									height: 40px;
									line-height: 40px;
									box-sizing: border-box;
									border: 0;
									padding: 0 15px;
									border-radius: 3px;
									color: #fff;
									font-size: 14px;
									background-color: #3f9f5f;
								}
					
								.btn_code:hover {
									cursor: pointer;
								}
					
								.input_code {
									width: 200px;
								}
					
								.input_pass {
									width: 100%;
								}
							}
					
							.input_type {
								height: 30px;
								line-height: 30px;
								color: red;
								font-size: 12px;
								// visibility: hidden;
					
								.err_icon {
									width: 12px;
									height: 12px;
									margin-right: 4px;
									margin-bottom: -2px;
								}
							}
					
							.btn_reg {
								width: 100%;
								height: 36px;
								background-color: #3f9f5f;
								line-height: 36px;
								box-sizing: border-box;
								border: 0;
								padding: 0 15px;
								border-radius: 3px;
								color: #fff;
								font-size: 16px;
								cursor: pointer;
							}
						}
						.sec_bottom{
							height: 40px;
							line-height: 40px;
							font-size: 14px;
							color: #928989;
							display: flex;
							justify-content: space-between;
							.fl span,.fr a{
								text-decoration: none;
								color: #3f9f5f;
							}
							.fl span:hover,.fr a:hover{
								border-bottom: 1px solid #3f9f5f;
								cursor: pointer;
							}
						}
					}
				}
				
				/* 登录 */
				.login_box {
					padding: 10px 25px;
					
					.q-login-tip {
						width: 300px;
						height: 52px;
						font-size: 14px;
						color: #959595;
						line-height: 60px;
					}
					.q-login-tip a{
						color: #3f9f5f;
						text-decoration: none;
					}
					.q-login-tip a:hover{
						border-bottom: 1px solid #3f9f5f;
					}
					
					.input_account {
						width: 330px;
						height: 100%;
					}
					/* 小图标 */
					.q-login-auth {
						width: 330px;
						height: 90px;
						line-height: 150px;
						position: relative;
						top: 0px;
						display: flex;
						justify-content:space-evenly;
						.icon{
							width: 40px;
							height: 40px;
						}
					}
				}
				
				/* 注册 */
				.register_box {
					height: 336px;
					padding: 40px 25px;
				}
				
				/* 扫码图片 */
				.bg_box {
					width: 275px;
					background: url(//fes.qyerstatic.com/FoLbAXJtwbB5SVORRmihPFWD-oYM) no-repeat;
					// background-position: 50%;
					background-size: auto 100%
				}
			}
		}
	}
</style>